<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Movie Recommendations - User {{ user_id }}</title>
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon32.png') }}"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="{{ url_for('static', filename='images/favicon16.png') }}"
    />
    <link
      rel="icon"
      type="image/x-icon"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon.ico') }}"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/style.css') }}"
    />
  </head>
  <body>
    <div class="container">
      <header class="mt-4 mb-5">
        <h1 class="text-center">Movie Recommendations</h1>
        <h3 class="text-center text-muted">User {{ user_id }}</h3>
        <p class="text-center">
          <a href="{{ url_for('index') }}" class="btn btn-outline-primary"
            >← Back to Home</a
          >
        </p>
      </header>

      <div class="row">
        <!-- Recommendations -->
        <div class="col-md-8">
          <div class="card shadow">
            <div class="card-header bg-primary text-white">
              <h4 class="mb-0">Top Recommendations</h4>
            </div>
            <div class="card-body">
              {% if recommendations.empty %}
              <div class="alert alert-warning">
                No recommendations could be generated for user {{ user_id }}.
                This might happen if the user has already rated all items in the
                dataset.
              </div>
              {% else %}
              <p>
                Generated {{ recommendations|length }} recommendations in {{
                "%.2f"|format(generation_time) }} seconds using {{
                model_params.similarity_method }} similarity with k={{
                model_params.k }}.
              </p>

              <!-- Recommendations Visualization -->
              {% if img_path %}
              <div class="text-center mb-4">
                <img
                  src="{{ img_path }}"
                  class="img-fluid"
                  alt="Recommendations Visualization"
                />
              </div>
              {% endif %}

              <!-- Recommendations Table -->
              <div class="table-responsive">
                <table class="table table-striped table-hover">
                  <thead>
                    <tr>
                      <th>Rank</th>
                      <th>Movie Title</th>
                      <th>Predicted Rating</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, rec in recommendations.iterrows() %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ rec.movie_title }}</td>
                      <td>
                        <div class="rating-stars">
                          <div class="rating-value">
                            {{ "%.2f"|format(rec.predicted_rating) }}
                          </div>
                          <div class="stars">
                            {% set full_stars = rec.predicted_rating|int %} {%
                            set half_star = (rec.predicted_rating - full_stars)
                            >= 0.5 %} {% for i in range(full_stars) %}
                            <span class="star full">★</span>
                            {% endfor %} {% if half_star %}
                            <span class="star half">★</span>
                            {% endif %} {% for i in range(5 - full_stars - (1 if
                            half_star else 0)) %}
                            <span class="star empty">☆</span>
                            {% endfor %}
                          </div>
                        </div>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- User Info and Similar Users -->
        <div class="col-md-4">
          <!-- User's Current Ratings -->
          {% if user_ratings is not none and not user_ratings.empty %}
          <div class="card shadow mb-4">
            <div class="card-header bg-info text-white">
              <h4 class="mb-0">User's Current Ratings</h4>
            </div>
            <div class="card-body">
              <p>
                User {{ user_id }} has rated {{ user_ratings|length }} movies.
              </p>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>Movie</th>
                      <th>Rating</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, rating in user_ratings.iterrows() %} {% if
                    loop.index <= 10 %}
                    <tr>
                      <td>{{ rating.movie_title }}</td>
                      <td>
                        <div class="rating-stars">
                          <div class="rating-value">{{ rating.rating }}</div>
                          <div class="stars">
                            {% for i in range(rating.rating|int) %}
                            <span class="star full">★</span>
                            {% endfor %} {% for i in range(5 -
                            rating.rating|int) %}
                            <span class="star empty">☆</span>
                            {% endfor %}
                          </div>
                        </div>
                      </td>
                    </tr>
                    {% endif %} {% endfor %}
                  </tbody>
                </table>
              </div>
              {% if user_ratings|length > 10 %}
              <p class="text-center text-muted">
                Showing top 10 of {{ user_ratings|length }} ratings
              </p>
              {% endif %}
            </div>
          </div>
          {% endif %}

          <!-- Similar Users -->
          {% if similar_users is not none and not similar_users.empty %}
          <div class="card shadow">
            <div class="card-header bg-success text-white">
              <h4 class="mb-0">Similar Users</h4>
            </div>
            <div class="card-body">
              <p>These users have similar taste profiles:</p>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>User ID</th>
                      <th>Similarity</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, user in similar_users.iterrows() %}
                    <tr>
                      <td>
                        <a
                          href="{{ url_for('recommend') }}?user_id={{ user.user_id }}"
                          class="btn btn-sm btn-outline-primary"
                        >
                          User {{ user.user_id |int }}
                        </a>
                      </td>
                      <td>{{ "%.4f"|format(user.similarity) }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          {% endif %}
        </div>
      </div>

      <footer class="mt-5 mb-3 text-center text-muted">
        <p>&copy; 2025 User-Based Collaborative Filtering Project</p>
      </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
